<template>
<div>
  <Uploader v-if="show" @closeAddvideo='closeAddvideo'></Uploader>
  <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" style='padding:0'>
        <a-form class="search-item" :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }" :form='searchform' @submit="handleSearch">
          <a-form-item label="训练日期">
              <a-date-picker @change="handleSearch" />
          </a-form-item>
        </a-form>
      </a-col>
  <a-button type="dashed" icon='plus' size='large' @click='show=true' style="width:100%">
    增加记录
  </a-button>
  <a-table :columns="columns" :dataSource="data" bordered size="small">
    <template v-for="col in ['date', 'time', 'location','score','note']" :slot="col" slot-scope="text, record">
      <div :key="col">
        <a-icon v-if="record.mark&&col=='date'" type="star" style="color:#ffbf00;fontSize:18px"/>
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="e => handleChange(e.target.value, record.key, col)"
        />
        <template v-else>{{ text }}</template>
      </div>
    </template>
    <template slot="operation" slot-scope="text, record">
      <div class="editable-row-operations">
        <a @click="govideo">分析视频</a>
        <span v-if="record.editable">
          <a @click="() => save(record.key)">保存</a>  
        </span>
        <span v-else>
          <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
        </span>
        <a @click="() => cancel(record.key)">删除</a>
        <a @click="record.mark=!record.mark">{{record.mark?'取消收藏':'收藏'}}</a>
      </div>
    </template>
  </a-table>
</div>
</template>
<script>
import Uploader from '@/components/uploader'
const columns = [
  {
    title: "日期",
    dataIndex: "date",
    width: "15%",
    scopedSlots: { customRender: 'date'
    }
  },
  {
    title: "训练次数",
    dataIndex: "time",
    width: "10%",
    scopedSlots: { customRender: "time" }
  },
  {
    title: "训练场地",
    dataIndex: "location",
    width: "15%",
    scopedSlots: { customRender: "location" }
  },
  {
    title: "训练成绩",
    dataIndex: "score",
    width: "15%",
    scopedSlots: { customRender: "score" }
  },
  {
    title: "批注",
    dataIndex: "note",
    width: "20%",
    scopedSlots: { customRender: "note" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

const data = [];
data.push({key: 0,
    date: '2020-04-'+1,
    time: '第'+1+'次训练',
    location: '南操',
    score:1+'kg',
    note:'抓握角度',
    mark:false})
for (let i = 1; i < 30; i++) {
  data.push({
    key: i,
    date: '2020-04-'+i,
    time: '第'+i+'次训练',
    location: '南操',
    score:i+'kg',
    note:'抓握角度',
    mark:parseInt(i)%2==0?true:false
  });
}
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      searchform:this.$form.createForm(this),
      show:false,
      visible:true,
      data:[],
      columns,
      editingKey: ""
    };
  },
  mounted(){
    this.$api.project.searchTrainrecord({
        athleteid: this.$store.state.athleteid
      }).then(res=>{
        this.data=res.data.data.length?[...res.data.data]:[]
      })
  },
  components:{
    Uploader
  },
  methods: {
    handleSearch(){},
    showUpload() {
      this.show = true;
      this.$store.commit('clearTotal');
    },
    closeAddvideo(){
      this.show=false
    },
    handleChange(value, key, column) {
      const newData = this.data?[...this.data]:[];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = this.data?[...this.data]:[];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = this.data?[...this.data]:[];
      const newCacheData = this.cacheData?[...this.cacheData]:[];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = this.data?[...this.data]:[];

      const target = newData.filter(item => key === item.key)[0];
      const targetIndex = newData.indexOf(target);
      newData.splice(targetIndex, 1);

      this.editingKey = "";
      if (target) {
        delete target.editable;
        this.data = newData;
      }
    },
    govideo(){
      this.$router.push({name:'video'})
    }
  }
};
</script>
<style>
.search-item .ant-form-item{
  margin-bottom: 0 !important;
}
</style>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>